<script setup>
import { ref, onMounted } from 'vue'
import PageContainer from '@/components/container/PageContainer.vue'
import { getAllDoctorsService } from '@/api/doctor.js'
import { useDoctorStore } from '@/stores/doctorStore'

import EditDoctorDrawer from './components/EditDoctorDrawer.vue'

import DoctorClassifySelect from '@/components/select/DoctorClassifySelect.vue'

import { doctorClassifyAllListAPI } from '@/api/doctorClassify'

// 使用医生仓库
const doctorStore = useDoctorStore()

// 分页参数
const params = ref({
  pageNum: 1,
  pageSize: 6,
  name: '',
  gender: '',
  classifyId: ''
})

// 总数
const total = ref(0)

// 医生列表
const doctorList = ref([])

// 医生classify选项
const doctorClassifyList = ref([])

/**
 * 组件挂载完成
 */
onMounted(async () => {
  // 获取医生分类列表
  const doctorClassifyResult =
    await doctorClassifyAllListAPI()
  doctorClassifyList.value = doctorClassifyResult.data.data

  // 获取医生列表
  getDoctorList()
})

/**
 * 页码改变
 */
const onCurrentChange = (page) => {
  // 重置页码
  params.value.pageNum = page
  // 发送请求获取数据
  getDoctorList(params.value)
}

/**
 * 页码大小改变
 */
const onSizeChange = (size) => {
  // 重置页码
  params.value.pageNum = 1
  // 重置每页显示条数
  params.value.pageSize = size
  // 发送请求获取数据
  getDoctorList(params.value)
}

/**
 * 顶部条件搜索似事件
 */
const onSearch = async () => {
  // 判断数据是否为空
  if (
    params.value.name === '' &&
    params.value.gender === '' &&
    params.value.classifyId === ''
  ) {
    ElMessage.warning('请先输入搜索条件')
    return
  }
  // 发送请求获取数据
  await getDoctorList(params.value)
  ElMessage.success('搜索成功')
}

/**
 * 重置搜索条件
 */
const onReset = async () => {
  // 判断数据是否为空
  if (
    params.value.name === '' &&
    params.value.gender === '' &&
    params.value.classifyId === ''
  ) {
    ElMessage.warning('请先输入搜索条件')
    return
  }
  params.value = {
    name: '',
    gender: '',
    classifyId: ''
  }
  // 重置页码
  params.value.pageNum = 1
  // 重置每页显示条数
  params.value.pageSize = 6
  // 发送请求获取数据
  await getDoctorList(params.value)
  ElMessage.success('重置成功')
}

/**
 * 获取医生列表
 */
const getDoctorList = async () => {
  const res = await getAllDoctorsService(params.value)
  doctorList.value = res.data.data.records
  total.value = res.data.data.total
  // 判断医生集合内是否都有gender和classifyId属性, 没有则排除
  doctorList.value = doctorList.value.filter(
    (item) => item.gender && item.classifyId
  )
}

/**
 * 编辑医生
 */
const editDoctorDrawerRef = ref(null)
const editDoctor = (index, row) => {
  // 判断当前的医生的status是否为1, 为1可以编辑, 为0不可以编辑
  if (doctorStore.doctor.status === 1) {
    // 打开编辑抽屉
    editDoctorDrawerRef.value.open(row)
  } else {
    ElMessage.warning('当前医生状态不允许编辑')
  }
}
// 刷新数据
const handleRefresh = () => {
  // 发送请求获取数据
  getDoctorList(params.value)
}

/**
 * 删除医生
 */
const delDoctor = (index, row) => {
  // 判断当前的医生的status是否为1, 为1可以删除, 为0不可以删除
  if (doctorStore.doctor.status === 1) {
    // 弹出框提示是否删除
    ElMessageBox.confirm(
      `你确认删除 医生 [${row.name}] 吗？`,
      '温馨提示',
      {
        type: 'warning',
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }
    ).then(() => {
      ElMessage.success('删除成功')
    })
  } else {
    ElMessage.warning('当前医生状态不允许编辑')
  }
}
</script>

<template>
  <PageContainer title="医生管理">
    <EditDoctorDrawer
      ref="editDoctorDrawerRef"
      @refresh="handleRefresh"
    ></EditDoctorDrawer>

    <!-- 头部搜索表单 -->
    <div class="top-form-container">
      <el-form
        class="top-form"
        :inline="true"
        :model="params"
      >
        <div class="form-item">
          <!-- 患者信息 -->
          <el-form-item label="医生姓名:">
            <el-input
              placeholder="请输入医生姓名"
              v-model="params.name"
            ></el-input>
          </el-form-item>
          <!-- 医生性别 -->
          <el-form-item label="性别:">
            <el-select
              v-model="params.gender"
              placeholder="请选择性别"
              size="large"
              style="width: 150px"
            >
              <el-option key="1" label="男" value="1" />
              <el-option key="0" label="女" value="0" />
            </el-select>
          </el-form-item>
          <!-- 医生类型 -->
          <el-form-item label="医生类型:">
            <DoctorClassifySelect
              v-model="params.classifyId"
              placeholder="请选择医生类型"
              size="large"
              style="width: 200px"
            ></DoctorClassifySelect>
          </el-form-item>
        </div>

        <div class="form-btn">
          <!-- 搜索 和 重置 -->
          <el-form-item>
            <el-button type="primary" @click="onSearch">
              搜索
            </el-button>
            <el-button type="primary" @click="onReset">
              重置
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <!-- 表格 -->
    <el-table
      ref="doctorTableRef"
      :data="doctorList"
      :header-cell-style="{
        textAlign: 'center',
        position: 'sticky',
        top: '0'
      }"
      :cell-style="{ textAlign: 'center' }"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
      highlight-current-row
      stripe
      size="large"
      class="patient-table"
    >
      <!-- 选择列 -->
      <el-table-column type="selection" width="80" />

      <!-- 设置编号列 -->
      <el-table-column
        type="index"
        label="编号"
        width="100"
      />

      <!-- 姓名 -->
      <el-table-column
        prop="name"
        label="医生姓名"
        width="100"
      />

      <!-- 性别 -->
      <el-table-column
        prop="gender"
        label="性别"
        width="150"
      >
        <template #default="scope">
          <!-- 使用el-tag判断gender, 如果为1, 显示为男, 如果为2, 显示为女 -->

          <el-tag
            size="large"
            :type="
              scope.row.gender === '1'
                ? 'primary'
                : 'danger'
            "
            >{{
              scope.row.gender === '1' ? '男' : '女'
            }}</el-tag
          >
        </template></el-table-column
      >

      <!-- 年龄 -->
      <el-table-column prop="age" label="年龄" width="80" />

      <!-- 电话号码 -->
      <el-table-column
        prop="phone"
        label="电话号码"
        width="200"
      />

      <!-- 职称 -->
      <el-table-column
        prop="classifyId"
        label="职称"
        width="150"
      >
        <template #default="scope">
          <el-tag size="large" type="info">{{
            doctorClassifyList.find(
              (item) => item.id === scope.row.classifyId
            ).classifyName
          }}</el-tag>
        </template>
      </el-table-column>

      <!-- 创建时间列 -->
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="200"
      />

      <!-- 表格操作按钮 -->
      <!-- 功能按钮列 -->
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="mid"
            type="success"
            auto-insert-space
            plain
            @click="editDoctor(scope.$index, scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="mid"
            type="danger"
            auto-insert-space
            plain
            @click="delDoctor(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>

      <!-- 设置空数据模板 -->
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="params.pageNum"
      v-model:page-size="params.pageSize"
      :page-sizes="[6, 8, 10]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </PageContainer>
</template>

<style scoped lang="scss">
.top-form-container {
  // 设置弹性布局
  display: flex;

  // 头部表单
  .top-form {
    display: flex;
    // 设置下边距
    margin-bottom: 20px;
    // 表格表单
    .form-item {
      .el-form-item {
        // 设置item的右边距
        margin-right: 20px;
      }
    }
    // 表单按钮
    .form-btn {
      // 设置左边距
      margin-left: 20px;
    }
  }

  // 批量删除按钮
  .batchDelete-btn {
    // 设置位置在右边
    margin-left: auto;
  }
}
</style>
